Search completed in 0.93 seconds.
<color> - CSS: Cascading Style Sheets
properties: background and border. it was essentially added to allow developers to override an inherited solid color. with the advent of alpha channels in css colors level 3, transparent was redefined as a true color. it can now be used wherever a <color> value can be used. currentcolor keyword the currentcolor keyword represents the value of an element's color property. this lets you use the
color value on properties that do not receive it by default. if currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property. currentcolor example html <div style="color:blue; border: 1px dashed currentcolor;"> the color of this text is blue. <div style="background:currentcolor; height:9px;"></div> this block is surrounded by a b...
...nt unexpected gray colors from appearing. in animations, the interpolation's speed is determined by the timing function. accessibility considerations some people have difficulty distinguishing colors. the wcag 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. see color and color contrast for more information. ...
...culty distinguishing colors. the wcag 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. see color and color contrast for more information. examples
color value tester in this example we provide a <div> and a text input. entering a valid color into the input causes the <div> to adopt that color, allowing you to test our
color values. ...
...And 2 more matches
edgeMode - SVG: Scalable Vector Graphics
the edgemode attribute determines how to extend the input image as necessary with
color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. two elements are using this attribute: <feconvolvematrix> and <fegaussianblur> feconvolvematrix for <feconvolvematrix>, edgemode determines how to extend the input image as necessary with
color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. ...
...the input image as necessary with
color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. value duplicate | wrap | none default value duplicate animatable yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the
color values at the given edge of the input image. wrap this value indicates that the input image is extended by taking the
color values from the opposite edge of the image. none this value indicates that the input image is extended with pixel values of zero for r, g, b and a. ...
...ating the
color values at the given edge of the input image. wrap this value indicates that the input image is extended by taking the
color values from the opposite edge of the image. none this value indicates that the input image is extended with pixel values of zero for r, g, b and a. fegaussianblur for <fegaussianblur>, edgemode determines how to extend the input image as necessary with
color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. ...
...And 2 more matches
CSS values and units - Learn web development
are used in very different contexts. in the following example we have set the color of our heading using a keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(197,93,161); } a value in css is a way to define a collection of allowable sub-values. this means that if you see <color> as valid you don't need to wonder which of the different types of
color value can be used — keywords, hex values, rgb() functions, etc. you can use any available <color> values assuming they are supported by your browser. the page on mdn for each value will give you information about browser support. for example, if you look at the page for <color> you will see that the browser compatibility section lists different types of
color value and support for them. let's have a...
...nt) and 1 (fully opaque). in the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque. note: when you use a number in css as a value it should not be surrounded in quotes. color there are many ways to specify color in css, some of which are more recently implemented than others. the same
color values can be used everywhere in css, whether you are specifying text color, background color, or whatever else. the standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) let's have a look at some of th...
... as good support and are less common. color keywords quite often in examples here in the learn section or elsewhere on mdn you will see the color keywords used, as they are a simple and understandable way of specifying color. there are a number of these keywords, some of which have fairly entertaining names! you can see a full list on the page for the <color> value. try playing with different
color values in the live examples below, to get more of an idea how they work. hexadecimal rgb values the next type of
color value you are likely to encounter is hexadecimal codes. each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. each pair of values represents one of...
...00%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white) we can update the rgb example to use hsl colors like this: just as rgb has rgba, hsl has an hsla equivalent, which gives you the same ability to specify the alpha channel. i've demonstrated this below by changing my rgba example to use hsla colors. you can use any of these
color values in your projects. it is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. you can mix and match color models, however for consistency it is usually best if your entire project uses the same one! images the <image> data type is used wherever an image is a valid value. this c...
Applying styles and colors - Web APIs
hape, there are two important properties we can use: fillstyle and strokestyle. fillstyle = color sets the style used when filling shapes. strokestyle = color sets the style for shapes' outlines. color is a string representing a css <color>, a gradient object, or a pattern object. we'll look at gradient and pattern objects later. by default, the stroke and fill color are set to black (css
color value #000000). note: when you set the strokestyle and/or fillstyle property, the new value becomes the default for all shapes being drawn from then on. for every shape you want in a different color, you will need to reassign the fillstyle or strokestyle property. the valid strings you can enter should, according to the specification, be css <color> values. each of the following examples describe t...
...be between 0.0 (fully transparent) to 1.0 (fully opaque). this value is 1.0 (fully opaque) by default. the globalalpha property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors. because the strokestyle and fillstyle properties accept css rgba
color values, we can use the following notation to assign a transparent color to them. // assigning transparent colors to stroke and fill style ctx.strokestyle = 'rgba(255, 0, 0, 0.5)'; ctx.fillstyle = 'rgba(255, 0, 0, 0.5)'; the rgba() function is similar to the rgb() function but it has one extra parameter. the last parameter sets the transparency value of this particular color. the valid range is agai...
...offsety = float indicates the vertical distance the shadow should extend from the object. this value isn't affected by the transformation matrix. the default is 0. shadowblur = float indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. the default value is 0. shadowcolor = color a standard css
color value indicating the color of the shadow effect; by default, it is fully-transparent black. the properties shadowoffsetx and shadowoffsety indicate how far the shadow should extend from the object in the x and y directions; these values aren't affected by the current transformation matrix. use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to ...
...ues to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. these are both 0 by default. the shadowblur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. the default value is 0. the shadowcolor property is a standard css
color value indicating the color of the shadow effect; by default, it is fully-transparent black. note: shadows are only drawn for source-over compositing operations. a shadowed text example this example draws a text string with a shadowing effect. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.shadowoffsetx = 2; ctx.shadowoffsety = 2; ctx.shadowblur = 2; ...
Embedding API for Accessibility
ument_fonts", whichfonts); /* whichfonts: 0=no, 1=yes */ moz 0.8 fonts from operating system? ...
... fonts from operating system? ...
...("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex
color value */); setcharpref("browser.visited_color", "#abcdef" /* hex
color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8 focus appearance setboolpref("browser.display.use_focus_colors", usefocuscolors); setcharpref("browser.display.fo...
Eyedropper - Firefox Developer Tools
the eyedropper is new in firefox 31. the eyedropper tool enables you to select colors in the current page. it works like a magnifying glass over the page, enabling you to select with pixel precision. ...
...t colors in the current page. it works like a magnifying glass over the page, enabling you to select with pixel precision. underneath the magnifying glass it shows the
color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a
color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current
color value in the eyedropper change. clicking copies...
...ctor's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current
color value in the eyedropper change. clicking copies the current
color value to the clipboard. changing a
color value in the rules view
color values appearing in the inspector's rules view have color samples next to them: clicking the sample shows a color picker popup. from firefox 31, the popup contains an eyedropper icon: click this icon to activate the eyedropper. now, when you click the eyedropper, the color in the rules view is set to the color you selected. ...
color - CSS: Cascading Style Sheets
currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. for an overview of using color in html, see applying color to html elements using css. ...
...of the textual and decorative parts of the element. accessibility concerns it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page. color contrast ratio is determined by comparing the luminosity of the text and background
color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66px and bold or larger, or 24px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal defi...
...ions specification status comment css color module level 4the definition of 'color' in that specification. working draft adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them. adds color keyword rebeccapurple. adds 4- and 8-digit hex
color values, where the last digit(s) represents the alpha value. adds hwb(), device-cmyk(), and color() functions. css color module level 3the definition of 'color' in that specification. recommendation deprecates system-colors. adds svg colors. adds the rgba(), hsl(), and hsla() functions. css level 2 (revision 1)the definition of 'color' in that specification. recommendation...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
ng. a matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value. each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels. ...
...ias" represents the value of the ‘bias’ attribute. note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks. to illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose
color values for one of the color channels are as follows: 0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 and you define a 3-by-3 convolution kernel as follows: 1 2 3 4 5 6 7 8 9 let's focus on the
color value at the second row and second column of the image (source pixel value is 120). assuming the simplest case (where the input image's pixel grid a...
...nd you define a 3-by-3 convolution kernel as follows: 1 2 3 4 5 6 7 8 9 let's focus on the
color value at the second row and second column of the image (source pixel value is 120). ...
SVG documentation index - SVG: Scalable Vector Graphics
perty's value is either embed or bidi-override. 59 display svg, svg attribute the display attribute lets you control the rendering of graphical or container elements. 60 divisor filters, svg, svg attribute the divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the input image
color value is divided to yield the destination
color value. 61 dominant-baseline reference, svg, svg attribute the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context. ...
...indicates a shift along the x-axis on the position of an element or its content. 64 dy svg, svg attribute the dy attribute indicates a shift along the y-axis on the position of an element or its content. 65 edgemode filters, needscompattable, needsexample, svg, svg attribute the edgemode attribute determines how to extend the input image as necessary with
color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. 66 elevation filters, svg, svg attribute the elevation attribute specifies the direction angle for the light source from the xy plane towards the z-axis, in degrees. note that the positive z-axis points towards the viewer of the content. 67 enable-bac...
... the <feblend> svg filter primitive composes two objects together ruled by a certain blending mode. this is similar to what is known from image editing software when blending two layers. the mode is defined by the mode attribute. 311 <fecolormatrix> element, svg, svg filter the <fecolormatrix> svg filter element changes colors based on a transformation matrix. every pixel's
color value [r,g,b,a] is matrix multiplied by a 5 by 5 color matrix to create new color [r',g',b',a']. 312 <fecomponenttransfer> element, svg, svg filter th <fecomponenttransfer> svg filter primitive performs color-component-wise remapping of data for each pixel. it allows operations like brightness adjustment, contrast adjustment, color balance or thresholding. 313 <fecompos...
Advanced styling effects - Learn web development
lue is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative). the second length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative). the third length value is the blur radius — the amount of blurring applied to the shadow. the
color value is the base color of the shadow. you can use any length and color units that would make sense to do so to define these values. multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </...
...ht and one dark, placed on opposite corners of the button to give it a nice shading effect. when the button is pressed in, the active state causes the first box shadow to be swapped for a very dark inset shadow, giving the appearance of the button being pressed in. note: there is another item that can be set in the box-shadow value — another length value can be optionally set just before the
color value, which is a spread radius. if set, this causes the shadow to become bigger than the original box. it is not very commonly used, but worth mentioning. filters while you can't change the composure of an image using css, there are some creative things you can do. one very nice property, which can help you bring interest to your designs, is the filter property. this property enables photoshop-lik...
Index - Firefox Developer Tools
this chart lists colors and css variables as implemented in the dark theme and light theme for developer tools. 31 eyedropper firefox, tools, web development:tools the eyedropper tool enables you to select colors in the current page. it works like a magnifying glass over the page, enabling you to select with pixel precision. underneath the magnifying glass it shows the
color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: 34 index tools found 158 pages: 35 json viewer firefox includes a json viewer. if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting. arrays and objects...
... you can examine and edit the page's html in the html pane. 64 examine and edit the box model guide, tools with the select element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page: 65 inspect and select colors guide, inspector, tools in the css pane's rules view, if a rule contains a
color value, you'll see a sample of the color next to the value: 66 open the inspector guide, inspector, tools there are two main ways to open the inspector: 67 reposition elements in the page starting in firefox 48 you can move absolutely positioned elements by dragging them around the page. 68 select an element guide, inspector, tools the sele...
Document.execCommand() - Web APIs
bug 1490641). fontname changes the font name for the selection or at the insertion point. this requires a font name string (like "arial") as a value argument. fontsize changes the font size for the selection or at the insertion point. this requires an integer from 1-7 as a value argument. forecolor changes a font color for the selection or at the insertion point. this requires a hexadecimal
color value string as a value argument. formatblock adds an html block-level element around the line containing the current selection, replacing the block element containing the line if one exists (in firefox, <blockquote> is the exception — it will wrap any containing block element). requires a tag-name string as a value argument. virtually all block-level elements can be used. (internet explorer and ed...
...s the character ahead of the cursor's position, identical to hitting the delete key on a windows keyboard. heading adds a heading element around a selection or insertion point line. requires the tag-name string as a value argument (i.e. "h1", "h6"). (not supported by internet explorer and safari.) hilitecolor changes the background color for the selection or at the insertion point. requires a
color value string as a value argument. usecss must be true for this to function. (not supported by internet explorer.) increasefontsize adds a <big> tag around the selection or at the insertion point. (not supported by internet explorer.) indent indents the line containing the selection or insertion point. in firefox, if the selection spans multiple lines at different levels of indentation, only the lea...
Index - Web APIs
he cssprimitivevalue interface is used to get a float value in a specified unit. if this css value doesn't contain a float value or can't be converted into the specified unit, a domexception is raised. 442 cssprimitivevalue.getrgbcolorvalue() api, cssprimitivevalue, method, getrgbcolorvalue the getrgbcolorvalue() method of the cssprimitivevalue interface is used to get an rgb
color value. if this css value doesn't contain a rgb
color value, a domexception is raised. modification to the corresponding style property can be achieved using the rgbcolor interface. 443 cssprimitivevalue.getrectvalue() api, cssprimitivevalue, method, getrectvalue the getrectvalue() method of the cssprimitivevalue interface is used to get a rect value. if this css value doesn't conta...
... object. 4739 webglrenderingcontext.clear() api, method, reference, webgl, webglrenderingcontext the webglrenderingcontext.clear() method of the webgl api clears buffers to preset values. 4740 webglrenderingcontext.clearcolor() api, method, reference, webgl, webglrenderingcontext the webglrenderingcontext.clearcolor() method of the webgl api specifies the
color values used when clearing color buffers. 4741 webglrenderingcontext.cleardepth() api, method, reference, webgl, webglrenderingcontext the webglrenderingcontext.cleardepth() method of the webgl api specifies the clear value for the depth buffer. 4742 webglrenderingcontext.clearstencil() api, method, reference, webgl, webglrenderingcontext the webglrenderingconte...
Web Accessibility: Understanding Colors and Luminance - Accessibility
n a powerful presence today. this is evolving, and new methods for measuring color involve measurements using other color spaces, but color measurements in the rgb color space still predominates, and this includes video production. the rgb color model is extended to include “alpha” -- rgba -- to allow specification of the opacity of a color. there's movement towards adopting the use of hsl
color values rather than rgb values is css color module 3 (see section 4.2.4), the rationale being that rgb is hardware-oriented, reflecting the use of crts, and that rgb is non-intuitive. that said, hsl colors incorporate lightness, not luminance, and this is a significant consideration. note that in that same section of the css color module 3, there are algorigthms available to translate the hsl to rgb. ...
... 0, 0 and an rgb percent reference: 60, 0, 0. window.getcomputedstyle() returns values using rgb decimal reference scale. for example, calling window.getcomputedstyle() on a div with a background-color: #990000; set returns the computed background color as rgb(153, 0, 0) -- the rgb decimal reference. window.getcomputedstyle() measures color in terms of rgb. css color module level 3 added hsl
color values, stating "css3 adds numerical hue-saturation-lightness (hsl) colors as a complement to numerical rgb colors. it has been observed that rgb colors have ... limitations". one of those limitations is that rgb is tied to computer hardware, rather than how the human eye perceives color. measuring relative luminance when evaluating luminance, bear in mind the w3c's wiki on relative luminance "alm...
outline-color - CSS: Cascading Style Sheets
s styles commonly involve making adjustments to the outline property. if the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it. color contrast ratio is determined by comparing the luminosity of the text and background
color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66px and bold or larger, or 24px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal def...
... and bold or larger, or 24px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocomputed valuefor the keyword invert, the computed value is invert. for the
color value, if the value is translucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. the transparent keyword maps to rgba(0,0,0,0).animation typea color formal syntax <color> | invertwhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentag...
<input type="color"> - HTML: Hypertext Markup Language
lowed by two digits each representing red, green, and blue, like this: #rrggbb. if you have colors that are in any other format (such as css color names or css color functions such as rgb() or rgba()), you'll have to convert them to hexadecimal before setting the value. ...
...with other <input> types, there are two events that can be used to detect changes to the
color value: input and change. input is fired on the <input> element every time the color changes. the change event is fired when the user dismisses the color picker. in both cases, you can determine the new value of the element by looking at its value. ...
divisor - SVG: Scalable Vector Graphics
a divisor that is the sum of all the matrix values tends to have an evening effect on the overall color intensity of the result. ...
...a divisor that is the sum of all the matrix values tends to have an evening effect on the overall color intensity of the result. ...
Scrollbar - Archive of obsolete content
rome/chrome.manifest and add: skin app-global standard/1.0 skin/global/ override chrome://global/skin/xulscrollbars.css chrome://app-global/skin/scrollbars.css xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx. so to make this work with osx, make an extra override: override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css change some
color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used. example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar o...
Editor Embedding Guide - Archive of obsolete content
ommand no parameters note only available if txmgr.dll is present. cmd_redo redoes last executed command. getcommandstate "state_enabled"(boolean) docommand no parameters note only available if txmgr.dll is present. cmd_fontcolor acts upon the current selection to set the font color. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) note for
color values, use the cstring representation of rrggbb, e.g., red="#ff0000" and black="#000000". cmd_backgroundcolor sets the background color of the document. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) note for
color values, use the cstring representation of rrggbb, e.g., red="#ff0000" and black="#000000". cmd_fontface sets the font face for the current s...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
content rather than dialog, but does not support content mode for xul. therefore, with jaws 7.10, to use xul inside of a browser, the type attribute cannot not be used. caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read
color values out if the colorpicker can get focus in the first place. column see grid columns see grid command see keyboard shortcut tutorial commandset see keyboard shortcut tutorial deck only the currently selected deck layer can be focused. grid although text in the grid can be read, jaws does not recogni...
-moz-border-bottom-colors - Archive of obsolete content
ested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to tables with border-collapse: collapse. syntax values accepts a white-space separated list of
color values. <color> specifies the color of a line of pixels of the bottom border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <perce...
-moz-border-left-colors - Archive of obsolete content
ested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to tables with border-collapse: collapse. syntax values accepts a white-space separated list of
color values. <color> specifies the color of a line of pixels of the left border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percent...
-moz-border-right-colors - Archive of obsolete content
ested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to tables with border-collapse: collapse. syntax values accepts a white-space separated list of
color values. <color> specifies the color of a line of pixels of the right border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percen...
-moz-border-top-colors - Archive of obsolete content
ested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to tables with border-collapse: collapse. syntax values accepts a white-space separated list of
color values. <color> specifies the color of a line of pixels of the top border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percenta...
Backgrounds and borders - Learn web development
t let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties. background colors the background-color property defines the background color on any element in css. the property accepts any valid <color>. a background-color extends underneath the content and padding box of the element. in the example below, we have used various
color values to add a background color to the box, a heading, and a <span> element. play around with these, using any available <color> value. background images the background-image property enables the display of an image in the background of an element. in the example below, we have two boxes — one has a background image which is larger than the box, the other has a small image of a star. this exam...
Test your skills: The Cascade - Learn web development
odepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you need to use one of the special values we looked at in the controlling inheritance section to write a declaration in a new rule that will reset the background color back to white, without using an actual
color value. in the example below see if you can match the image above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your wo...
What is CSS? - Learn web development
ich take the form of property and value pairs. each pair specifies a property of the element(s) we are selecting, then a value that we'd like to give the property. before the colon, we have the property, and after the colon, the value. css properties have different allowable values, depending on which property is being specified. in our example, we have the color property, which can take various
color values. we also have the font-size property. this property can take various size units as a value. a css stylesheet will contain many such rules, written one after the other. h1 { color: red; font-size: 5em; } p { color: black; } you will find that you quickly learn some values, whereas others you will need to look up. the individual property pages on mdn give you a quick way to look up...
How can we design for all types of users? - Learn web development
ound and background. the calculation may seem pretty complicated, but we can rely on tools to do the job for us. let's download and install the paciello group's colour contrast analyser. note: alternatively you can find a number of contrast checkers online, such as webaim's color contrast checker. we suggest a local checker because it comes packaged with an on-screen color picker to find out a
color value. for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page. font size you can specify font size on a website either through relative units or absolute units. absolute un...
CSS basics - Learn web development
style. properties these are ways in which you can style an html element. (in this example, color is a property of the <p> elements.) in css, you choose which properties you want to affect in the rule. property value to the right of the property—after the colon—there is the property value. this chooses one out of many possible appearances for a given property. (for example, there are many
color values in addition to red.) note the other important parts of the syntax: apart from the selector, each ruleset must be wrapped in curly braces. ({}) within each declaration, you must use a colon (:) to separate the property from its value or values. within each ruleset, you must use a semicolon (;) to separate each declaration from the next one. to modify multiple property values in one rules...
Making decisions in your code — conditionals - Learn web development
it should accept the choice variable as its input expression. for each case, the choice should equal one of the possible values that can be selected, that is, white, black, purple, yellow, or psychedelic. note that the values are case sensitive, and should equal the <option> element value values rather than the visual labels. for each case, the update() function should be run, and be passed two
color values, the first one for the background color, and the second one for the text color. remember that
color values are strings, so need to be wrapped in quotes. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. playable code 2 <h2>live output</h2> <div class="output" style="height: 300px;"> <label fo...
Drawing graphics - Learn web development
erations on the canvas will involve manipulating this object. let's do one last thing before we move on. we'll color the canvas background black to give you a first taste of the canvas api. add the following lines at the bottom of your javascript: ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); here we are setting a fill color using the canvas' fillstyle property (this takes
color values just like css properties do), then drawing a rectangle that covers the entire area of the canvas with thefillrect method (the first two parameters are the coordinates of the rectangle's top left hand corner; the last two are the width and height you want the rectangle drawn at — we told you those width and height variables would be useful)! ok, our template is done and it's time to move on. ...
Multimedia: Images - Learn web development
d continue to load after the first paint, if their dimensions aren't defined before load, they can cause reflows to the page content. for example, when text gets pushed down the page by images loading. for this reason, it's critical that you set width and height attributes so that the browser can reserve space for them in the layout. for any background images, it's important you set a background-
color value so any content overlaid is still readable before the image has downloaded. conclusion in this section we took a look at image optimization. you now have a general understanding of how to optimize half of the average web sites average bandwidth total. this is just one of the types of media consuming users bandwidth and slowing down page load. let's take a look at video optimization, tackling the...
Handling common HTML and CSS problems - Learn web development
the background just wouldn't show up at all so the text would be unreadable, no good at all! to sort this out, we have added a second background-color declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. what happens is a browser visiting this page first applies the first background-
color value; when it gets to the second background-color declaration, it will override the initial value with this value if it supports rgba colors. if not, it will just ignore the entire declaration and move on. note: the same is true for other css features like media queries, @font-face and @supports blocks — if they are not supported, the browser just ignores them. ie conditional comments ie condit...
Using the Browser API
ere we call the canmovebwd() and canmovefwd() functions we discussed earlier — it makes sense to update the status of the back and forward buttons after each page reload. in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience — this can be read out of the event object's e.detail.background
color value. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.background
color value reported is rgb(0, 83, 159). back to the stop/reload button — updating the icon is nice, but we also need to update the functionality that is invoked when each icon is displayed. we do this with the following function, which runs the htmliframeelement.stop() method to stop the page ...
mozbrowserloadend
and mozbrowserloadend events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate. in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.background
color value reported is rgb(0, 83, 159). var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyn...
Examine and edit CSS - Firefox Developer Tools
omplete depending on the variables defined in the css. if you enter var( into a property value and then type a dash (-), any variables you have declared in your css will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each variable choice is storing (bug 1451211). in addition, hovering over a css variable name brings up a tooltip showing what
color value is stored in that variable (bug 1431949). editing keyboard shortcuts you can use the arrow and page up/down keys (along with others) to increase/decrease numeric rules while editing: the up arrow increments values by 1 — for example, "1px" changes to "2px". shift + up/down increments or decrements values by 10. ctrl + up/down (on linux and windows) or alt + up/down (on mac) increments ...
Inspect and select colors - Firefox Developer Tools
if you click on the color sample, you'll see a color picker popup, enabling you to change the color: if the color is a foreground color, the color picker tells you whether its contrast with the background color meets accessibility guidelines. hovering the mouse over the contrast message gives a more detailed explanation. ...
CSSPrimitiveValue - Web APIs
style property can be achieved using the counter interface. cssprimitivevalue.getfloatvalue() this method is used to get a float value in a specified unit. if this css value doesn't contain a float value or can't be converted into the specified unit, a domexception is raised. cssprimitivevalue.getrgbcolorvalue() this method is used to get the rgb color. if this css value doesn't contain a rgb
color value, a domexception is raised. modification to the corresponding style property can be achieved using the rgbcolor interface. cssprimitivevalue.getrectvalue() this method is used to get the rect value. if this css value doesn't contain a rect value, a domexception is raised. modification to the corresponding style property can be achieved using the rect interface. cssprimitivevalue.getstringvalue(...
CanvasRenderingContext2D.putImageData() - Web APIs
javascript const canvas = document.createelement("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.getcontext("2d"); const imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1...
Compositing example - Web APIs
ntent.', 'the existing canvas content is kept where both the new shape and existing canvas content overlap. everything else is made transparent.', 'the existing content is kept where it doesn\'t overlap the new shape.', 'the existing canvas is only kept where it overlaps the new shape. the new shape is drawn behind the canvas content.', 'where both shapes overlap the color is determined by adding
color values.', 'only the new shape is shown.', 'shapes are made transparent where both overlap and drawn normal everywhere else.', 'the pixels are of the top layer are multiplied with the corresponding pixel of the bottom layer. a darker picture is the result.', 'the pixels are inverted, multiplied, and inverted again. a lighter picture is the result (opposite of multiply)', 'a combination of multiply and s...
HTMLTableElement.bgColor - Web APIs
tableelement.bgcolor property represents the background color of the table. the bgcolor attribute is deprecated in html 4.01. the css background-color property should be used instead by modifying the element's style object or using a style rule. also available on dom tbody, row and cell objects. syntax color = table.bgcolor table.bgcolor = color parameters color is a string representing a
color value. example // set table background colour to lightblue var t = document.getelementbyid('tablea'); t.bgcolor = 'lightblue'; specification dom level 2 html:htmltableelement .bgcolor ...
WebGLRenderingContext.isEnabled() - Web APIs
d() method of the webgl api tests whether a specific webgl capability is enabled or not for this context. by default, all capabilities except gl.dither are disabled. syntax glboolean gl.isenabled(cap); parameters cap a glenum specifying which webgl capability to test. possible values: constant description gl.blend blending of the computed fragment
color values. see webglrenderingcontext.blendfunc(). gl.cull_face culling of polygons. see webglrenderingcontext.cullface(). gl.depth_test depth comparisons and updates to the depth buffer. see webglrenderingcontext.depthfunc(). gl.dither dithering of color components before they get written to the color buffer. gl.polygon_offset_fill adding an ...
WebGLRenderingContext - Web APIs
nderingcontext.blendequationseparate() sets the rgb blend equation and alpha blend equation separately. webglrenderingcontext.blendfunc() defines which function is used for blending pixel arithmetic. webglrenderingcontext.blendfuncseparate() defines which function is used for blending pixel arithmetic for rgb and alpha components separately. webglrenderingcontext.clearcolor() specifies the
color values used when clearing color buffers. webglrenderingcontext.cleardepth() specifies the depth value used when clearing the depth buffer. webglrenderingcontext.clearstencil() specifies the stencil value used when clearing the stencil buffer. webglrenderingcontext.colormask() sets which color components to enable or to disable when drawing or rendering to a webglframebuffer. webglrenderingcontex...
Clearing by clicking - Web APIs
ize the drawing buffer (the viewport). if (!gl) { gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { alert("failed to get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random
color value using a helper function. var color = getrandomcolor(); // set the clear color to the random color. gl.clearcolor(color[0], color[1], color[2], 1.0); // clear the context with the newly set color. this is // the function call that actually does the drawing. gl.clear(gl.color_buffer_bit); } // random color helper function. function getrandomcolor() { return [math.
Color masking - Web APIs
inally, color masking teaches us that webgl is not only a state machine, it is also a graphics pipeline. this means that graphics operations in webgl are done in a certain order, where the output of each operation serves as the input of the next. so, for example, clearing operation sets the value of each pixel to the chosen clear color. masking occurs later in the pipeline, and modifies the pixel
color value, so the final result on the screen is that of the clear color, tinted by the color mask. <p>tinting the displayed colors with color masking.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; wid...
Simple color animation - Web APIs
var color = getrandomcolor(); // set the webglrenderingcontext clear color to the // random color. gl.clearcolor(color[0], color[1], color[2], 1.0); // clear the context with the newly set color. gl.clear(gl.color_buffer_bit); } // random color helper function. function getrandomcolor() { return [math.random(), math.random(), math.random...
Using textures in WebGL - Web APIs
and passing them to the vertex shader; this will indicate the location within the texture corresponding to the vertex. the fragment shader the fragment shader likewise needs to be updated: const fssource = ` varying highp vec2 vtexturecoord; uniform sampler2d usampler; void main(void) { gl_fragcolor = texture2d(usampler, vtexturecoord); } `; instead of assigning a
color value to the fragment's color, the fragment's color is computed by fetching the texel (that is, the pixel within the texture) based on the value of vtexturecoord which like the colors is interpolated bewteen vertices. attribute and uniform locations because we changed an attribute and added a uniform we need to look up their locations const programinfo = { program: shaderprogram, attribloc...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
n change the highlight color when an item doesn't have focus. for listboxes that are not focused, use a different highlight color, to give the appearance that the listbox is no longer focused -- a lighter color for unfocused lists will also make the listbox state more visually obvious and thus more usable for everyone. for popup listboxes used for dropdowns in autocomplete text fields, change the
color value by 1 when the user is typing in the textfield as opposed to arrowing through the list. the listbox will still visually appear to be active, but the screen reader behavior is improved by not echoing too much spoken information for each keypress. one downside to this solution is that means that you cannot use "client data" for the list items, because windows won't allow owner drawn list items to us...
-webkit-tap-highlight-color - CSS: Cascading Style Sheets
ighlight-color is a non-standard css property that sets the color of the highlight that appears over a link while it's being tapped. the highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on. -webkit-tap-highlight-color: red; -webkit-tap-highlight-color: transparent; /* for removing the highlight */ syntax values a <
color value>. formal definition initial valueblackapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} ...
-webkit-text-stroke - CSS: Cascading Style Sheets
the -webkit-text-stroke css property specifies the width and color of strokes for text characters. this is a shorthand property for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-color. /* width and
color values */ -webkit-text-stroke: 4px navy; text-stroke: 4px navy; /* global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -webkit-stroke-color -webkit-stroke-width syntax values <length> the width of the stroke. <color> the color of the stroke. formal definition initial valueas each of the properties of the shorthand:-webkit-text-stroke-width: 0-...
::placeholder - CSS: Cascading Style Sheets
ext and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data. color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background
color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66px and bold or larger, or 24px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 usability ...
:link - CSS: Cascading Style Sheets
udo-class (:active, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :link rule before all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :active. note: use :any-link to select an element independent of whether it has been visited or not. syntax :link examples by default, most browsers apply a special
color value to visited links. thus, the links in this example will probably have special font colors only before you visit them. (after that, you'll need to clear your browser history to see them again.) however, the background-
color values are likely to remain, as most browsers do not set that property on visited links by default. html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="...
-ms-high-contrast - CSS: Cascading Style Sheets
controls the color of text content. highlighttext: controls the color of selected text. highlight: controls the background color of selected text. buttonface: controls the color of a <button> element's text. window: controls the color of the background. the <a> element controls the color of links. because high contrast mode themes are dynamic, use these color keywords in place of other css
color values. this will ensure that content will always be able to be perceived. content if at all possible, prefer updating html markup over modifying content using css2 system color keywords. this helps keep the content more predictable. specifications not part of any standard. remarks as of microsoft edge 18, -ms-high-contrast: none is no longer supported. microsoft edge versions 18 and higher will ...
Using CSS gradients - CSS: Cascading Style Sheets
vel 3 method of repeating the color for each stop and the second example is the css images level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration. controlling the progression of a gradient by default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint
color value. you can control the interpolation, or progression, between two color stops by including a color hint location. in this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. the second example does not contain the hint to hilight the difference the color hint can make: <div class="colorhint-gradient"></div> <div cla...
CSS values and units - CSS: Cascading Style Sheets
s and units module level 3 candidate recommendation adds calc(), ch, rem, vw, vw, vmin, vmax, q css color module level 4 working draft adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them. adds color keyword rebeccapurple. adds 4- and 8-digit hex
color values, where the last digit(s) represents the alpha value. adds hwb(), device-cmyk(), and color() functions. css color module level 3 recommendation deprecates system-colors. adds svg colors. adds the rgba(), hsl(), and hsla() functions. css images module level 4 working draft adds element(), image(), image-set(), conic-gradient() css images module l...
background-color - CSS: Cascading Style Sheets
still be visible through any transparency in the image. accessibility concerns it is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page. color contrast ratio is determined by comparing the luminance of the text and background
color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66px and bold or larger, or 24px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal def...
<blend-mode> - CSS: Cascading Style Sheets
: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: luminosity; } description for each pixel among the layers to which it is applied, a blend mode takes the colors of the foreground and the background, perfoms a calculation on them, and returns a new
color value. changes between blend modes are not interpolated. any change occurs immediately. examples blend mode comparison in the following example, we have a <div> with two background images set on it — a firefox logo on top of a linear gradient. below it we have a provided a <select> menu that allows you to change the background-blend-mode applied to the <div>, allowing you to compare the different...
opacity - CSS: Cascading Style Sheets
0.4); accessibility concerns if text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page. color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background
color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66px and bold or larger, or 24px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal defi...
outline - CSS: Cascading Style Sheets
ccess criterion 2.4.7: focus visible formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:outline-color: for the keyword invert, the computed value is invert. for the
color value, if the value is translucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. the transparent keyword maps to rgba(0,0,0,0).outline-width: an absolute length; if the keyword none is specified, the computed value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: ...
repeating-linear-gradient() - CSS: Cascading Style Sheets
he length of the gradient that repeats is the distance between the first and last color stop. if the first color does not have a color-stop-length, the color-stop-length defaults to 0. with each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. thus, the position of each ending color stop coincides with a starting color stop; if the
color values are different, this will result in a sharp visual transition. this can be altered with repeating the first color again as the last color. as with any gradient, a repeating linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. because <gradient>s belong to the <image> dat...
repeating-radial-gradient() - CSS: Cascading Style Sheets
to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. with each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). thus, the position of each ending color stop coincides with a starting color stop; if the
color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color. as with any gradient, a repeating radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. because <gradient>s belong to the <image> data typ...
scrollbar-color - CSS: Cascading Style Sheets
provided by the platform, or a custom scrollbar with dark colors. light show a light scrollbar, which can be either a light variant of scrollbar provided by the platform, or a custom scrollbar with light colors. <color> <color> applies the first color to the scrollbar thumb, the second to the scrollbar track. note: user agents must apply any scrollbar-
color value set on the root element to the viewport. accessibility concerns when using scrollbar-color property with specific
color values, authors should ensure the specified colors have enough contrast between them. for keyword values, uas should ensure the colors they use have enough contrast. see techniques for wcag 2.0: g183: using a contrast ratio of 3:1. formal definition initial valueautoapp...
text-decoration-color - CSS: Cascading Style Sheets
r of the line decoration. accessibility concerns it is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. color contrast ratio is determined by comparing the luminosity of the text and background
color values. color alone should not be used to convey meaning. for example, change of text and text-decoration-color alone is not enough to indicate a link has focus. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuecurrentcolorapplies toall elements. it also applies to...
Challenge solutions - Developer guides
y possible solutions. the sections below correspond to the titles of the tutorial sections. why use css colors challenge without looking up a reference, find five more color names that work in your stylesheet. solution css supports common color names like orange, yellow, blue, green, or black. it also supports some more exotic color names like chartreuse, fuschia, or burlywood. see css
color value for a complete list as well as other ways of specifying colors. how css works dom inspector challenge in domi, click on a strong node. use domi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text. solution in the menu above the right-hand pane, choose css rules. you see two items listed, one that references an inte...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
lor in css, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. this is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. as such, there are several ways you can describe color in css. for more detailed discussion of each of the
color value types, see the reference for the css <color> unit. keywords a set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. color keywords include the standard primary and secondary colors (such as red, blue, or orange), shades of gray (from bla...
<button>: The Button element - HTML: Hypertext Markup Language
he browser stylesheet, but you can override it to add your own focused style using button::-moz-focus-inner { }. if overridden, it is important to ensure that the state change when focus is moved to the button is high enough that people experiencing low vision conditions will be able to perceive it. color contrast ratio is determined by comparing the luminosity of the button text and background
color values compared to the background the button is placed on. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for large text. (large text is defined as 18.66px and bold or larger, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c u...
theme-color - HTML: Hypertext Markup Language
if specified, the content attribute must contain a valid css <color>. example <meta name="theme-color" content="#4285f4"> the following image shows the effect that the <meta> element above will have on a document displayed in chrome running on an android mobile device. image credit: from icons & browser colors, created and shared by google and used according to terms described in the creative commons 4.0 attribution license. ...
HTML documentation index - HTML: Hypertext Markup Language
158 standard metadata names attribute, html, html document metadata, reference, metadata the <meta> element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value. 159 theme-color attribute, html, html document metadata, reference, metadata the theme-
color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. if specified, the content attribute must contain a valid css <color>. 160 <meter>: the html meter element element, html, html forms, html5, reference, web the html <meter> element represents either a sc...
rendering-intent - SVG: Scalable Vector Graphics
tribute: <color-profile> usage notes value auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric default value auto animatable yes auto this value allows the user agent to determine the best intent based on the content type. perceptual this value preserves the relationship between colors. it attempts to maintain relative
color values among the pixels as they are mapped to the target device gamut. sometimes pixel values that were originally within the target device gamut are changed in order to avoid hue shifts and discontinuities and to preserve as much as possible the overall appearance of the scene. note: this method should be used for images. relative-colorimetric this value preserves the relative saturation (chroma...
stop-color - SVG: Scalable Vector Graphics
element but it has effect only on the following element: <stop> usage notes value currentcolor | <color> <icccolor> default value black animatable yes currentcolor this keyword denotes the current fill color and can be specified in the same manner as within a <paint> specification for the fill and stroke attributes. <color> this value indicates a
color value. <icccolor> this value refers to an icc color profile. specifications specification status comment scalable vector graphics (svg) 2the definition of 'stop-color' in that specification. candidate recommendation added a note that in svg the transparent keyword is treated differently than in css. scalable vector graphics (svg) 1.1 (second edition)the d...